<template>
  <div :class="layoutCls">
    <t-head-menu :class="menuCls" :theme="theme" expandType="popup" :value="active">
      <template #logo>
        <span v-if="showLogo" class="header-logo-container" @click="handleNav('/patient/list')">
          <tLogoFull class="t-logo" />
        </span>
        <div v-else class="header-operate-left">
          <t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
            <t-icon class="collapsed-icon" name="view-list" />
          </t-button>
          <!-- <search :layout="layout" /> -->
        </div>
      </template>
      <menu-content v-show="layout !== 'side'" class="header-menu" :navData="menu" />
      <template #operations>
        <div class="operations-container">
          <!-- 搜索框 -->
          <!-- <search v-if="layout !== 'side'" :layout="layout" /> -->

          <!-- 全局通知 -->
          <!-- <notice /> -->

          <!-- <t-tooltip placement="bottom" content="代码仓库">
            <t-button theme="default" shape="square" variant="text" @click="navToGitHub">
              <t-icon name="logo-github" />
            </t-button>
          </t-tooltip> -->
          <!-- <t-tooltip placement="bottom" content="帮助文档">
            <t-button theme="default" shape="square" variant="text" @click="navToHelper">
              <t-icon name="help-circle" />
            </t-button>
          </t-tooltip> -->
          <t-dropdown :min-column-width="125" trigger="click">
            <template #dropdown>
              <t-dropdown-menu>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
                  <t-icon name="user-circle"></t-icon>个人中心
                </t-dropdown-item>
                <t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
                  <t-icon name="poweroff"></t-icon>退出登录
                </t-dropdown-item>
              </t-dropdown-menu>
            </template>
            <t-button class="header-user-btn" theme="default" variant="text">
              <template #icon>
                <t-icon class="header-user-avatar" name="user-circle" />
              </template>
              <div class="header-user-account">
                {{ name }}
                <t-icon name="chevron-down" />
              </div>
            </t-button>
          </t-dropdown>
          <t-tooltip placement="bottom" content="系统设置">
            <t-button theme="default" shape="square" variant="text" @click="toggleSettingPanel">
              <t-icon name="setting" />
            </t-button>
          </t-tooltip>
        </div>
      </template>
    </t-head-menu>
  </div>
</template>

<script>
  import Vue from 'vue';
  import {
    prefix
  } from '@/config/global';
  import tLogoFull from '@/assets/assets-logo-full.svg';

  // import Notice from './Notice.vue';
  // import Search from './Search.vue';
  import MenuContent from './MenuContent';

  export default Vue.extend({
    components: {
      MenuContent,
      tLogoFull,
      // Notice,
      // Search,
    },
    props: {
      theme: String,
      layout: {
        type: String,
        default: 'top',
      },
      showLogo: {
        type: Boolean,
        default: true,
      },
      menu: {
        type: Array,
      },
      isFixed: {
        type: Boolean,
        default: false,
      },
      isCompact: {
        type: Boolean,
        default: false,
      },
      maxLevel: {
        type: Number,
        default: 3,
      },
    },
    data() {
      return {
        prefix,
        visibleNotice: false,
        isSearchFocus: false,
        // name:''
      };
    },
    computed: {
      name() {
        return this.$store.state.user.userInfo.name
      },
      active() {
        if (!this.$route.path) {
          return '';
        }
        return this.$route.path
          .split('/')
          .filter((item, index) => index <= this.maxLevel && index > 0)
          .map((item) => `/${item}`)
          .join('');
      },
      showMenu() {
        return !(this.layout === 'mix' && this.showLogo === 'side');
      },
      layoutCls() {
        return [`${this.prefix}-header-layout`];
      },
      menuCls() {
        return [{
          [`${this.prefix}-header-menu`]: !this.isFixed,
          [`${this.prefix}-header-menu-fixed`]: this.isFixed,
          [`${this.prefix}-header-menu-fixed-side`]: this.layout === 'side' && this.isFixed,
          [`${this.prefix}-header-menu-fixed-side-compact`]: this.layout === 'side' && this.isFixed && this
            .isCompact,
        }, ];
      },
    },
    methods: {
      toggleSettingPanel() {
        this.$store.commit('setting/toggleSettingPanel', true);
      },
      handleLogout() {
        this.$router.push(`/login?redirect=${this.$router.history.current.fullPath}`);
      },
      changeCollapsed() {
        this.$store.commit('setting/toggleSidebarCompact');
      },
      handleNav(url) {
        this.$router.push(url);
      },
      navToGitHub() {
        window.open('https://github.com/Tencent/tdesign-vue-starter');
      },
      navToHelper() {
        window.open('http://tdesign.tencent.com/starter/docs/get-started');
      },
    },

  });
</script>
<style lang="less">
  @import '@/style/variables.less';

  .header-menu {
    flex: 1 1 1;
    display: inline-flex;
  }

  .operations-container {
    display: flex;
    align-items: center;
    margin-right: 12px;

    .t-popup__reference {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .t-button {
      margin: 0 8px;

      &.header-user-btn {
        margin: 0;
      }
    }

    .t-icon {
      font-size: 20px;

      &.general {
        margin-right: 16px;
      }
    }
  }

  .header-operate-left {
    display: flex;
    margin-left: 20px;
    align-items: normal;
    line-height: 0;

    .collapsed-icon {
      font-size: 20px;
    }
  }

  .header-logo-container {
    width: 184px;
    height: 26px;
    display: flex;
    margin-left: 24px;
    color: @text-color-primary;

    .t-logo {
      width: 100%;
      height: 100%;

      &:hover {
        cursor: pointer;
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  .header-user-account {
    display: inline-flex;
    align-items: center;
    color: @text-color-primary;

    .t-icon {
      margin-left: 4px;
      font-size: 16px;
    }
  }

  .t-head-menu__inner {
    border-bottom: 1px solid @border-level-1-color;
  }

  .t-menu--light {
    .header-user-account {
      color: @text-color-primary;
    }
  }

  .t-menu--dark {
    .t-head-menu__inner {
      border-bottom: 1px solid var(--td-gray-color-10);
    }

    .header-user-account {
      color: rgba(255, 255, 255, 0.55);
    }

    .t-button {
      --ripple-color: var(--td-gray-color-10) !important;

      &:hover {
        background: var(--td-gray-color-12) !important;
      }
    }
  }

  .operations-dropdown-container-item {
    width: 100%;
    display: flex;
    align-items: center;

    .t-icon {
      margin-right: 8px;
    }

    .t-dropdown__item {
      .t-dropdown__item__content {
        display: flex;
        justify-content: center;
      }

      .t-dropdown__item__content__text {
        display: flex;
        align-items: center;
        font-size: 14px;
      }
    }

    .t-dropdown__item {
      width: 100%;
      margin-bottom: 0px;
    }

    &:last-child {
      .t-dropdown__item {
        margin-bottom: 8px;
      }
    }
  }
</style>
